<template>
  <view class="container">
    <u-gap height="20"></u-gap>
	<view class="menu-list disb aic">
		<text class="fz12">头像</text>
		<view class="disp aic">
			<button class="changeUserImage disc aic jsa" type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
				<image class="userPic" :src="user.avatar?user.avatar:'../../static/images/test/1.webp'" mode=""></image>
			</button>
			<image class="right" src="../../static/images/preat/right.png" mode=""></image>
		</view>
	</view>
	<view class="menu-list disb aic">
		<text class="fz12">昵称</text>
		<view class="disp aic fz12">
			<input type="nickname" class="nickname" placeholder="请输入" @blur="blur" v-model="user.nickname">
			<image class="right" src="../../static/images/preat/right.png" mode=""></image>
		</view>
	</view>
	<view class="menu-list disb aic">
		<text class="fz12">手机号</text>
		<view class="disp aic fz12">{{user.mobile}}</view>
	</view>
<!--	<view class="menu-list disb aic">-->
<!--		<text class="fz12">ID</text>-->
<!--		<view class="disp aic fz12">{{user.id}}</view>-->
<!--	</view>-->
	<view class="tit colorZT">基本信息</view>
	<view class="menu-list disb aic">
		<text class="fz12">姓名</text>
		<u-input class="fz12" v-model="user.name" type="text" placeholder="请输入姓名" :border="false" input-align="right" />
	</view>
	<view class="menu-list disb aic"  @click="click(3)">
		<text class="fz12">性别</text>
		<view class="disp aic fz12">
			<text>{{getSex(user.sex)}}</text>
			<image class="right" src="../../static/images/preat/right.png" mode=""></image>
		</view>
	</view>
	<view class="menu-list disb aic">
		<text class="fz12">年龄</text>
		<u-input class="fz12" v-model="user.age" maxlength="3" type="number" placeholder="请输入年龄" :border="false" input-align="right" />
	</view>
	<view class="menu-list disb aic" @click="click(1)">
		<text class="fz12">户籍</text>
		<view class="disp aic fz12">
			<text :class="user.censusRegister?'':'colorc'">{{user.censusRegister?user.censusRegister:'请选择'}}</text>
			<image class="right" src="../../static/images/preat/right.png" mode=""></image>
		</view>
	</view>
	<view class="menu-list disb aic" @click="click(2)">
		<text class="fz12">户口</text>
		<view class="disp aic fz12">
			<text :class="user.registeredHk?'':'colorc'">{{user.registeredHk?user.registeredHk:'请选择'}}</text>
			<image class="right" src="../../static/images/preat/right.png" mode=""></image>
		</view>
	</view>

   <view class="tit colorZT">协议与说明</view>
   <view class="menu-list disb aic" @click="clickNotice(1)">
      <text class="fz12">用户协议</text>
      <image class="right" src="../../static/images/preat/right.png" mode=""></image>
    </view>
    <view class="menu-list disb aic" @click="clickNotice(2)">
      <text class="fz12">隐私政策</text>
      <image class="right" src="../../static/images/preat/right.png" mode=""></image>
    </view>

<!--	<view class="" v-if="user.userType!=3">-->
<!--		<view class="tit disb">-->
<!--			<view class="colorZT">资产信息</view>-->
<!--			<view class="" @click="toAsset">+新增</view>-->
<!--		</view>-->
<!--	</view>-->

	<u-action-sheet :actions="list" :title="title" :show="show" @select='select' @close='show=false'></u-action-sheet>
	<view class="modify tac colorf fz12" @click="modifyMessage">保 存</view>
  </view>
</template>
<script>
import {modify,getUserInfo} from "../../api/setting.js"
export default {
	data() {
		return {
			user:{},
			show:false,
			title:'',
			list:[],
			selectId:null,
		}
	},
	computed: { },
	onShow() {
		this.getMessage()
	},
	methods: {
		click(i){
			this.show = true
			this.selectId = i
			if(i==1){
				this.title = '选择户籍'
				this.list = [
					{name: '重庆本地'},
					{name: '重庆外省'},
				]
			}
			if(i==2){
				this.title = '选择户口'
				this.list = [
					{name: '城市户口'},
					{name: '农村户口'},
				]
			}
			if(i==3){
				this.title = '选择性别'
				this.list = [
					{name: '男',num:1},
					{name: '女',num:2},
					{name: '未知',num:3},
				]
			}
		},
    clickNotice(i){
      if (i==1){
        uni.navigateTo({
          url:"/pages/setting/agreement?id=1"
        })
      }
      if (i==2){
        uni.navigateTo({
          url:"/pages/setting/privacyPolicy?id=2"
        })
      }
    },
		//选择
		select(e){
			this.show = false
			if(this.selectId==1){
				this.user.censusRegister = e.name
			}
			if(this.selectId==2){
				this.user.registeredHk = e.name
			}
			if(this.selectId==3){
				this.user.sex = e.num
			}
		},
		//性别
		getSex(i){
			if(i==1){
				return '男'
			}
			if(i==2){
				return '女'
			}
			if(i==3){
				return '未知'
			}
		},
		toAsset(){
			uni.navigateTo({
				url:"/pages/setting/assetType"
			})
		},
		// 获取用户信息
		getMessage(){
			getUserInfo().then(res => {
				this.user = res.data
			})
		},
		//获取用户头像，获取到的头像是临时文件，要通过自己的上传接口上传到服务器
		chooseavatar(e) {
			let avatarUrl = e.detail.avatarUrl
			this.user.avatar ='data:image/png;base64,' +  wx.getFileSystemManager().readFileSync(avatarUrl, 'base64');
		},
		//获取昵称
		blur(e){
			this.user.nickname = e.detail.value
		},
		// 修改资料
		modifyMessage(){
			modify(this.user).then(res => {
					if(res.code==0){
						uni.$u.toast('修改成功')
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/user/user"
							})
						},1000)
            //更新缓存
            getUserInfo().then(res => {
              this.user = res.data
              uni.setStorageSync('userInfo',res.data)
            })
					}else{
						uni.$u.toast(res.msg)
					}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.container{
	min-height: 100vh;
	background-color: #f7f7f7;
	padding: 1rpx 0;
	.menu-list{
    line-height: 28px;
		font-size: 12px;
		padding: 20rpx 30rpx;
		margin: 5rpx 0;
		background-color: #fff;
		.changeUserImage{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			.userPic{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.right{
			width: 20rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
		.colorc{
			color: #d6d6d6;
		}
		.nickname{
			text-align: right;
		}
	}
	.tit{
		color: #3D6AF6;
		padding: 20rpx 30rpx;
	}
}
.modify{
	width: 80%;
	line-height: 80rpx;
	//margin: 40rpx auto 0;
  margin: 37px auto;
	border-radius: 40rpx;
	background-color: #323CDD;
}
.colorZT{
	color: #3D6AF6;
}
</style>
